<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fit Layout</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
    <script src="../../../../scripts/jquery.min.js"></script>
    <script src="../../../../scripts/miniui/miniui.js"></script>
    <link href="../../../../scripts/miniui/themes/default/miniui.css" rel="stylesheet">
    <link href="../../../../scripts/miniui/themes/icons.css" rel="stylesheet">
    <link href="../../../../scripts/miniui/themes/pure/skin.css" rel="stylesheet">
    <script src="../../../../scripts/core.js"></script>

</head>
<body>
<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<div class="mini-toolbar" style="padding:2px;border-bottom:0;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;">
                <a class="mini-button" iconCls="icon-add" onclick="add()" plain="true">新加</a>
                <a class="mini-button" iconCls="icon-save" onclick="mergeServer()" plain="true">合并服务器</a>
                <a class="mini-button" iconCls="icon-tip" onclick="openServer()" plain="true">服务器上线</a>
                <a class="mini-button" iconCls="icon-no" onclick="closeServer()" plain="true">关闭服务器</a>
                <a class="mini-button" iconCls="icon-edit" onclick="saveData()" plain="true">保存</a>
            </td>

        </tr>
        <tr>
            <td>
                区服:
                <input class="mini-combobox" id="zone" showNullItem="true"
                       style="width:150px;"
                       textField="name"
                       valueField="id"/>
            </td>
            <td style="white-space:nowrap;">
                <a class="mini-button" onclick="search()">查询</a>
            </td>
        </tr>
    </table>
</div>
<!--撑满页面-->
<div class="mini-fit">

    <mini-datagrid _dataField="data111" allowCellEdit="true" allowCellSelect="true"
                   allowResize="true" allowSortColumn="false"
                   class="mini-datagrid"
                   id="datagrid1" idField="id" multiSelect="true"
                   pageSize="1000" showSortIcon="true"
                   style="width:100%;height:100%;"
                   url="/server/getCmsServer">
        <columns>
            <column type="indexcolumn"></column>
            <column type="checkcolumn"></column>
            <column field="id" headerAlign="center" name="id" width="150">
                服务器id
            </column>
            <column field="name" width="100">服务器名称
                <input class="mini-textbox" property="editor" style="width:100%;"/>
            </column>
            <column field="status" width="100">状态(0:正常,1:维护,2:定时开放)
                <input class="mini-textbox" property="editor" style="width:100%;"/>
            </column>
            <column field="zoneId" width="100">区id
                <input class="mini-textbox" property="editor" style="width:100%;"/>
            </column>
            <column field="zoneName" width="100">区服名称

            </column>
            <column dateFormat="yyyy-MM-dd HH:mm:ss" field="openTime" width="100">开服时间
                <input class="mini-datepicker" property="editor"
                       property="editor" showClearButton="false"
                       showOkButton="true"
                       showTime="true" timeFormat="HH:mm:ss"
                />
            </column>
            <column field="remark" headerAlign="center" width="120">备注
                <input class="mini-textbox" property="editor" style="width:100%;"/>
            </column>
        </columns>
    </mini-datagrid>

</div>

<script type="text/javascript">

    var auth = GetParams()
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.setAjaxOptions({
        headers: {"authId": auth.authId, "token": auth.token}
    });

    grid.load();

    function add() {

        mini.open({
            targetWindow: window,
            url: "AddServer.html?authId=" + auth.authId + "&token=" + auth.token,
            title: "新增",
            width: 600,
            height: 400,
            onload: function () {

            },
            ondestroy: function (action) {
                grid.reload();
            }
        });
    }

    // 页面完全加载完成（包括图片等资源）
    $(window).on("load", async function () {
        var zone = mini.get("zone");
        const tokenResp = await fetch("/server/getCmsZoneCombo", {
            method: 'POST',
            headers: {"authId": auth.authId, "token": auth.token},
            contentType: 'application/json'
        });
        const sysResp = await tokenResp.json();
        zone.setData(sysResp)
    });

    function search() {
        var zoneId = mini.get("zone").getValue();
        grid.load({
            zoneId: zoneId
        });
    }

    function saveData() {
        if (grid.getSelecteds().length == 0) return;
        var row = grid.getSelecteds()[0];
        if (row.openTime == "") {
            row.openTime = null;
        }
        var json = mini.encode({
            data: row
        });
        grid.loading("保存中，请稍后......");
        $.ajax({
            url: "/server/save",
            data: json,
            type: "post",
            headers: {"authId": auth.authId, "token": auth.token},
            contentType: 'application/json',
            success: function (text) {
                grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    function openServer() {
        var json = mini.encode({});
        $.ajax({
            url: "/server/openServer",
            data: json,
            type: "post",
            headers: {"authId": auth.authId, "token": auth.token},
            contentType: 'application/json',
            success: function (text) {
                grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    function closeServer() {
        var json = mini.encode({});
        $.ajax({
            url: "/server/closeServer",
            data: json,
            type: "post",
            headers: {"authId": auth.authId, "token": auth.token},
            contentType: 'application/json',
            success: function (text) {
                grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }


    function mergeServer() {
        if (grid.getSelecteds().length == 0) {
            alert("没有选中任何行")
            return;
        }
        var zoneId = mini.get("zone").getValue();
        if (zoneId == "" || zoneId == null) {
            mini.alert("请选择区服")
            return;
        }
        var serverIds = []
        for (var i = 0; i < grid.getSelecteds().length; i++) {
            serverIds.push(grid.getSelecteds()[i].id)
        }
        var body = {
            serverIds: serverIds,
            zoneId: zoneId
        }
        var json = mini.encode(body);

        $.ajax({
            url: "/server/mergeServer",
            data: json,
            headers: {"authId": auth.authId, "token": auth.token},
            type: "post",
            contentType: 'application/json',
            success: function (text) {
                grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });

    }

</script>

</body>
</html>